<template>
  <div id="RoomType">
    <div class="content">
      <div class="overflow-auto">
        <div class="body">
          <el-table :data="tableData" :header-cell-style="{ background: '#eef1f6', color: '#303133', fontWeight: 400 }"
            style="width: 100%">
            <el-table-column prop="photo" label="房型封面">
              <template slot-scope="scope">
                <img :src="scope.row.photo" />

              </template>
            </el-table-column>
            <el-table-column prop="PMSroomName" align="center" label="PMS系统名称">
            </el-table-column>
            <el-table-column prop="channelName" align="center" label="渠道房型名称">
            </el-table-column>
            <el-table-column align="right" label="操作" style="display:flex;flex-direction:row-reverse">
              <template slot-scope="scope">
                <el-button type="text" @click="Deatil">{{ scope.row.bt }}</el-button>
              </template>>
            </el-table-column>
          </el-table>
          <div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  Name: 'RoomType',
  data() {
    return {
      tableData: [{
        photo: require('../../../../assets/images/room.png'),
        PMSroomName: '豪华大床房',
        channelName: '豪华大床房',
        bt: '详情'
      }]
    }
  },
  methods: {
    Deatil() {
      this.$router.push({ path: '/RoomType/RoomDeatil' })
      console.log("点击了详情");
    }
  }
}
</script>

<style lang="scss" scoped>
.content {
  .overflow-auto {
    width: calc(100% - 190px);
    height: calc(100% - 40px);
    padding: 20px;
    overflow: auto;

    .body {
      width:100%;
      background-color: white;
    }
  }
}
</style>